import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./orderSearchDetail.module.scss";
import { IconFont } from '@nutui/icons-vue';
import { useStore as useIndexStore } from "@/store/index";
import { useRoute, useRouter } from "vue-router";
import PlanDetail from "./components/PlanDetail/PlanDetail";
import { $getDetail } from "@/api/api";
import { useStore as useUserStore } from "@/store/user";
import to from "await-to-js";
export default defineComponent({
  setup() {
    const indexStore = useIndexStore();
    const planDetailRef = ref(null as any);
    const router = useRouter();
    const route = useRoute();
    const id = route.query.id;
    const userStore = useUserStore();
    const state = reactive({
      loading: true,
      order_status: '',//订单状态
      insured_name: '',//被保人姓名
      insured_id_no: '',//被保人证件号
      order_no: '',  //订单编号
      create_time: '',  //创建时间
      applicant_name: '', //缴费人姓名
      trade_type: '',  //支付方式
    } as any);
    onMounted(() => {
      getDetail();
    })
    const getDetail = async () => {
      state.loading = true;
      const [err, res]: any = await to($getDetail({ id, token: userStore.login_info.token }));
      if (!err) {
        state.order_status = res.data?.order_status || '';
        state.insured_name = res.data?.insured_name || '';
        state.insured_id_no = res.data?.insured_id_no || '';
        state.create_time = res.data?.create_time || '';
        state.applicant_name = res.data?.applicant_name || '';
        state.trade_type = res.data?.trade_type || '';
        state.order_no = res.data?.order_no || '';
      } else {
        setTimeout(() => {
          router.go(-1);
        }, 1500);
      }
      state.loading = false;
    }
    return () => (
      <>
        <div class={styles.orderSearchDetail}>
          {
            state.loading ? <div class={styles.loading}>
              <IconFont name="loading" size="0.6rem"></IconFont>
              <span>加载中...</span>
            </div> : <>
              <div class={styles.container}>
                <div class={styles.header}>
                  <div class={styles.status}>
                    <span class={styles.label}>订单状态</span>
                    <span class={styles.text}>{state.order_status}</span>
                  </div>
                  <img class={styles['order-icon']} src={require("@/assets/image/order.png")} />
                </div>
                <div class={styles.content}>
                  <div class={styles['name-box']}>
                    <span class={styles.name}>{indexStore.info.name}</span>
                    <span class={styles['see-content']} onClick={() => { planDetailRef.value.open() }}>查看保障内容</span>
                  </div>
                  <div class={styles['price-box']}>
                    <span>保费:</span>
                    <span class={styles.price}>128.00</span>
                    <span>元</span>
                  </div>
                </div>
                <div class={styles.insured}>
                  <div class={styles['insured-row']}>
                    <div class={styles['insured-name']}>
                      <IconFont name="order" color="rgb(45, 139, 229)" />
                      <span>被保险人: {state.insured_name}</span>
                    </div>
                    <div class={styles['insured-idno']}>
                      {state.insured_id_no}
                    </div>
                  </div>
                </div>
                <div class={styles.orderInfo}>
                  <div class={styles['orderInfo-container']}>
                    <div class={styles['orderInfo-row']}>
                      <span class={styles['orderInfo-label']}>订单编号</span>
                      <div class={styles['orderInfo-value']}>
                        {state.order_no}
                      </div>
                    </div>
                    <div class={styles['orderInfo-row']}>
                      <span class={styles['orderInfo-label']}>创建时间</span>
                      <span class={styles['orderInfo-value']}>{state.create_time}</span>
                    </div>
                    <div class={styles['orderInfo-row']}>
                      <span class={styles['orderInfo-label']}>缴费人姓名</span>
                      <span class={styles['orderInfo-value']}>{state.applicant_name}</span>
                    </div>
                    {
                      state.trade_type && <div class={styles['orderInfo-row']}>
                        <span class={styles['orderInfo-label']}>支付方式</span>
                        <span class={styles['orderInfo-value']}>{state.trade_type}</span>
                      </div>
                    }
                  </div>
                </div>
              </div>
            </>
          }
        </div>
        <PlanDetail ref={planDetailRef} />
      </>
    )
  }
})